import React,{useState,useEffect} from 'react'
import '../static/style/components/header.css'
import { Row, Col, Menu, Icon, Affix } from 'antd'
import Router from 'next/router'
import Link from 'next/link'
import axios from 'axios'
import servicePath from '../config/apiUrl'

const Header = () => {
    const [navArray, setNavArray] = useState([])
    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(servicePath.getTypeInfo).then(
                (res) => {
                    // setNavArray(res.data.data)
                    return res.data.data
                }
            )
            setNavArray(result)
        }
        fetchData()
    },[])

    const handleClick = (e) => {
        if(e.key == 0){
            Router.push('/index')
        }else{
            Router.push('/list?id='+e.key)
        }
    }


    return (
        <Affix>
            <div className="header">
                <Row type="flex" justify="center">
                    <Col xs={ 24 } sm={ 24 } md={ 10 } lg={ 10 } xl={ 10 }>
                        <span className="header_logo">
                            web前端
                        </span>
                        <span className="header_txt">
                            12312312阿三大苏打
                        </span>
                    </Col>
                    <Col xs={ 0 } sm={ 0 } md={ 14 } lg={ 8 } xl={ 6 }>
                        <Menu mode="horizontal" onClick={handleClick}>
                            <Menu.Item key={0}>
                                <Icon type="home"/>
                                首页
                            </Menu.Item>
                            {
                                navArray.map((item)=>{
                                    return (
                                        <Menu.Item key={item.Id}>
                                            <Icon type={item.icon}/>
                                            {item.typeName}
                                        </Menu.Item>
                                    )
                                })
                            }
                            {/* <Menu.Item key="video">
                                <Icon type="instagram"/>
                                视频
                            </Menu.Item>
                            <Menu.Item key="life">
                                <Icon type="smile"/>
                                生活
                            </Menu.Item> */}
                        </Menu>
                    </Col>
                </Row>
            </div>
        </Affix>
    )
}

export default Header
